<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:o="http://openfaces.org/"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <head>
    </head>
    <body>
        <ui:composition template="/templates/default.xhtml">
		 	<ui:define name="title">OpenHDS - Edit Relationship</ui:define>
		
			<ui:param name="crud" value="#{relationshipCrud}" />
			
            <ui:define name="listing">
            	<ui:include src="list.xhtml" />
            </ui:define>
	        
            <ui:define name="display">
            
            	<h:outputText value="#{navController.breadcrumbTrail}" />
            
                <h1>#{msg.relationshipEdit}</h1>
                <h:messages id="errors" globalOnly="true" />
                <h:form id="form">
                     <h:panelGrid columns="4">

                        <h:outputText value="#{msg.relationshipIndividualA}:"/>
                        <h:outputText />
                        <c:if test="#{flowScope == null}">
                        	<h:inputText styleClass="individual" id="individualA" value="#{relationshipCrud.item.individualA}" converter="#{individualExtIdConverter}"/>
                        </c:if>
                        <c:if test="#{flowScope != null}">
                           	<h:inputText styleClass="individual" id="individualA" rendered="#{relationshipCrud.item.individualA != null}" value="#{relationshipCrud.item.individualA}" disabled="#{relationshipCrud.item.individualA != null}" converter="#{individualExtIdConverter}" title = "#{msg.tipIndivExtId}" />
                        </c:if>
                        <h:message for="individualA" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                        <h:outputText value="#{msg.relationshipIndividualB}:"/>
                        <h:outputText />
                        <c:if test="#{flowScope == null}">
                        	<h:inputText styleClass="individual" id="individualB" value="#{relationshipCrud.item.individualB}" converter="#{individualExtIdConverter}"/>
                        </c:if>
                        <c:if test="#{flowScope != null}">
                        	<h:inputText styleClass="individual" id="individualB" value="#{relationshipCrud.item.individualB}" disabled="#{relationshipCrud.item.individualB !=null}" converter="#{individualExtIdConverter}" title = "#{msg.tipIndivExtId}" />
                        </c:if>
                        <h:message for="individualB" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="#{msg.relationshipType}:"/>
						<img class="clickable" onclick="O$('popupWindowForMaritalStatusStartType').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                    <h:inputText id="maritalStatus" value="#{relationshipCrud.item.aIsToB}" converter="#{defaultConverter}" />
	                    <h:message for="maritalStatus" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
							
                        <h:outputText value="#{msg.relationshipStartDate} (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser id="startDate" value="#{relationshipCrud.startDate}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="startDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="#{msg.relationshipEndEvent}:"/>
	                    <img class="clickable" onclick="O$('popupWindowForMaritalStatusEndType').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                    <h:inputText id="maritalStatusEnd" value="#{relationshipCrud.item.endType}" converter="#{maritalStatusEndTypeCodesConverter}" />
	                    <h:message for="maritalStatusEnd" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                        <h:outputText value="#{msg.relationshipEndDate} (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser id="endDate" value="#{relationshipCrud.endDate}" pattern="#{siteProperties.dateFormat}" /> 
                        <h:message for="endDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                        <h:outputText value="#{msg.fieldWorkerId}:"/>
                        <h:outputText />
                        <h:inputText styleClass="collectedBy" id="collectedBy" converter="#{fieldWorkerExtIdConverter}" disabled="#{flowScope.updating != null}" value="#{relationshipCrud.item.collectedBy}" />
                        <h:message for="collectedBy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    </h:panelGrid>
                    <script>
		            	document.getElementById('form:startDate').focus();
		            	document.getElementById('form:individualB').focus();
		            	document.getElementById('form:individualA').focus();
		            </script>
                    <br />

                	 <h:commandButton action="#{relationshipCrud.edit}" value="#{msg.lblSave}">
	        			<f:setPropertyActionListener target="#{jsfService.itemId}" value="#{relationshipCrud.item.uuid}" />
	        		</h:commandButton>
	        		<h:outputText value=" " />
					<h:commandButton value="#{msg.lblCancel}" rendered="#{flowScope != null}" immediate="true" action="cancel" />
                </h:form>
                <script>
					$(".individual").autocomplete({source:"/openhds/individual.autocomplete"});
					$(".collectedBy").autocomplete({source:"/openhds/collectedBy.autocomplete"});
				</script>
            </ui:define>
        </ui:composition>
    </body>
</html>